﻿@page "/Box_Chart"

@using Tooltip = AntDesign.Charts.Tooltip

<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Box Data="_data1" Config="_config1" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <Box Data="_data2" Config="_config2" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <Box Data="_data3" Config="_config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <Box Data="_data4" Config="_config4" />
    </TabPane>
</Tabs>

<DynamicExample @ref="@_example">
    <Box @ref="@Chart"/>
</DynamicExample>

@code {

    public IChartComponent Chart;
    private DynamicExample _example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        _example.Chart = Chart;
    }

    #region Basic box plot

    private readonly object[] _data1 =
    {
        new
        {
            x = "Oceania",
            low = 1,
            q1 = 9,
            median = 16,
            q3 = 22,
            high = 24
        },
        new
        {
            x = "East Europe",
            low = 1,
            q1 = 5,
            median = 8,
            q3 = 12,
            high = 16,
        },
        new
        {
            x = "Australia",
            low = 1,
            q1 = 8,
            median = 12,
            q3 = 19,
            high = 26,
        },
        new
        {
            x = "South America",
            low = 2,
            q1 = 8,
            median = 12,
            q3 = 21,
            high = 28,
        },
        new
        {
            x = "North Africa",
            low = 1,
            q1 = 8,
            median = 14,
            q3 = 18,
            high = 24,
        },
        new
        {
            x = "North America",
            low = 3,
            q1 = 10,
            median = 17,
            q3 = 28,
            high = 30,
        },
        new
        {
            x = "West Europe",
            low = 1,
            q1 = 7,
            median = 10,
            q3 = 17,
            high = 22,
        },
        new
        {
            x = "West Africa",
            low = 1,
            q1 = 6,
            median = 8,
            q3 = 13,
            high = 16,
        }
    };

    private readonly BoxConfig _config1 = new BoxConfig
    {
        Width = 400,
        Height = 500,
        AutoFit = false,
        XField = "x",
        YField = new[] {"low", "q1", "median", "q3", "high"},
        BoxStyle = new GraphicStyle()
        {
            Stroke = "#545454",
            Fill = "#1890FF",
            FillOpacity = new decimal(0.3),
        },
        Animation = false
    };

    #endregion

    #region Grouped box plot

    private readonly object[] _data2 =
    {
        new
        {
            species = "I. setosa",
            type = "SepalLength",
            value = 5.1,
            _bin = new[] {4.3, 4.8, 5, 5.2, 5.8},
        },
        new
        {
            species = "I. setosa",
            type = "SepalWidth",
            value = 3.5,
            _bin = new[] {2.3, 3.2, 3.4, 3.7, 4.4},
        },
        new
        {
            species = "I. setosa",
            type = "PetalLength",
            value = 1.4,
            _bin = new[] {1, 1.4, 1.5, 1.6, 1.9},
        },
        new
        {
            species = "I. setosa",
            type = "PetalWidth",
            value = 0.2,
            _bin = new[] {0.1, 0.2, 0.2, 0.3, 0.6},
        },
        new
        {
            species = "I. versicolor",
            type = "SepalLength",
            value = 7,
            _bin = new[] {4.9, 5.6, 5.9, 6.3, 7}
        },
        new
        {
            species = "I. versicolor",
            type = "SepalWidth",
            value = 3.2,
            _bin = new[] {2, 2.5, 2.8, 3, 3.4},
        },
        new
        {
            species = "I. versicolor",
            type = "PetalLength",
            value = 4.7,
            _bin = new[] {3, 4, 4.35, 4.6, 5.1},
        },
        new
        {
            species = "I. versicolor",
            type = "PetalWidth",
            value = 1.4,
            _bin = new[] {1, 1.2, 1.3, 1.5, 1.8},
        },
        new
        {
            species = "I. virginica",
            type = "SepalLength",
            value = 6.3,
            _bin = new[] {4.9, 6.2, 6.5, 6.9, 7.9},
        },
        new
        {
            species = "I. virginica",
            type = "SepalWidth",
            value = 3.3,
            _bin = new[] {2.2, 2.8, 3, 3.2, 3.8},
        },
        new
        {
            species = "I. virginica",
            type = "PetalLength",
            value = 6,
            _bin = new[] {4.5, 5.1, 5.55, 5.9, 6.9},
        },
        new
        {
            species = "I. virginica",
            type = "PetalWidth",
            value = 2.5,
            _bin = new[] {1.4, 1.8, 2, 2.3, 2.5},
        }
    };

    private readonly BoxConfig _config2 = new BoxConfig
    {
        XField = "type",
        YField = "_bin",
        GroupField = "species"
    };

    #endregion

    #region Box plot with error

    private readonly object[] _data3 =
    {
        new
        {
            x = "职业 A",
            low = 20000,
            q1 = 26000,
            median = 27000,
            q3 = 32000,
            high = 38000,
            outliers = new[] {50000, 52000},
        },
        new
        {
            x = "职业 B",
            low = 40000,
            q1 = 49000,
            median = 62000,
            q3 = 73000,
            high = 88000,
            outliers = new[] {32000, 29000, 106000},
        },
        new
        {
            x = "职业 C",
            low = 52000,
            q1 = 59000,
            median = 65000,
            q3 = 74000,
            high = 83000,
            outliers = new[] {91000},
        },
        new
        {
            x = "职业 D",
            low = 58000,
            q1 = 96000,
            median = 130000,
            q3 = 170000,
            high = 200000,
            outliers = new[] {42000, 210000, 215000},
        },
        new
        {
            x = "职业 E",
            low = 24000,
            q1 = 28000,
            median = 32000,
            q3 = 38000,
            high = 42000,
            outliers = new[] {48000},
        },
        new
        {
            x = "职业 F",
            low = 47000,
            q1 = 56000,
            median = 69000,
            q3 = 85000,
            high = 100000,
            outliers = new[] {110000, 115000, 32000},
        },
        new
        {
            x = "职业 G",
            low = 64000,
            q1 = 74000,
            median = 83000,
            q3 = 93000,
            high = 100000,
            outliers = new[] {110000},
        },
        new
        {
            x = "职业 H",
            low = 67000,
            q1 = 72000,
            median = 84000,
            q3 = 95000,
            high = 110000,
            outliers = new[] {57000, 54000},
        },
    };

    private readonly BoxConfig _config3 = new BoxConfig
    {
        XField = "x",
        YField = new[] {"low", "q1", "median", "q3", "high"},
        OutliersField = "outliers",
        OutliersStyle = new GraphicStyle()
        {
            Fill = "#f6f"
        }
    };

    #endregion

    #region Set alias of field

    private readonly object[] _data4 =
    {
        new
        {
            x = "Oceania",
            low = 1,
            q1 = 9,
            median = 16,
            q3 = 22,
            high = 24
        },
        new
        {
            x = "East Europe",
            low = 1,
            q1 = 5,
            median = 8,
            q3 = 12,
            high = 16,
        },
        new
        {
            x = "Australia",
            low = 1,
            q1 = 8,
            median = 12,
            q3 = 19,
            high = 26,
        },
        new
        {
            x = "South America",
            low = 2,
            q1 = 8,
            median = 12,
            q3 = 21,
            high = 28,
        },
        new
        {
            x = "North Africa",
            low = 1,
            q1 = 8,
            median = 14,
            q3 = 18,
            high = 24,
        },
        new
        {
            x = "North America",
            low = 3,
            q1 = 10,
            median = 17,
            q3 = 28,
            high = 30,
        },
        new
        {
            x = "West Europe",
            low = 1,
            q1 = 7,
            median = 10,
            q3 = 17,
            high = 22,
        },
        new
        {
            x = "West Africa",
            low = 1,
            q1 = 6,
            median = 8,
            q3 = 13,
            high = 16,
        }
    };

    private readonly BoxConfig _config4 = new BoxConfig
    {
        Width = 400,
        Height = 500,
        XField = "x",
        YField = new[] {"low", "q1", "median", "q3", "high"},
        Meta = new
        {
            low = new
            {
                alias = "最低值"
            },
            q1 = new
            {
                alias = "下四分位数"
            },
            median = new
            {
                alias = "最低值"
            },
            q3 = new
            {
                alias = "上四分位数"
            },
            high = new
            {
                alias = "最高值"
            }
        },
        Tooltip = new Tooltip()
        {
            Fields = new[] {"low", "q1", "median", "q3", "high"}
        },
        BoxStyle = new GraphicStyle()
        {
            Stroke = "#545454",
            Fill = "#1890FF",
            FillOpacity = new decimal(0.3),
        },
        Animation = false
    };

    #endregion

}